import React from 'react';
class MenuCon extends React.Component{
    constructor(props){
        super(props);
        this.state={
            fixed:{}
        }
    }
    scroll=(e)=>{
        // $(window).height();
        // $(document).height();
        // $(window).scrollTop();
        if($(window).scrollTop()>80){
            this.setState({fixed:this.props.fixed})
            let bottom = 317-($(document).height()-$(window).scrollTop()-$(window).height());
            if(bottom>=0){
                bottom= bottom+20;
                this.setState({
                    fixed:{...this.state.fixed,bottom:`${bottom}px`}
                })
            }else{
                this.setState({
                    fixed:{...this.state.fixed,bottom:'20px'}
                })
            }
        }
        else{
            this.setState({fixed:{}})
        }
    }
    componentDidMount(){
        window.addEventListener('scroll',this.scroll)
    }
    componentWillUnmount(){
        window.removeEventListener('scroll',this.scroll)
    }
    render(){
        const {style} = this.props;
        const {fixed} = this.state;
        return(
            <div className="sidebar-wrapper m-start-left" style={{...style,...fixed}}>
                <div style={{
                    height: '100%',
                    overflow: 'auto',
                }}>
                    {this.props.children}
                </div>
            </div>   
         )
    }
}

MenuCon.defaultProps ={
    style:{float:'left'}
}
export default MenuCon;